<template>
  <div>
    <el-container>
      <el-header>
        <span style="float: left;">Bitcoin: Total Transfer Volume to Exchanges - Binance</span>
        <span style="float: right;">
          <el-date-picker v-model="dataForm.beginDate" type="date" placeholder="选择日期" @change="choseChange"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-date-picker v-model="dataForm.endDate" type="date" placeholder="选择日期" @change="choseChange"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
        </span>
      </el-header>
      <el-main>
        <div>
          <el-select v-model="dataForm.exchange" placeholder="Exchange" @change="choseChange">
            <el-option v-for="item in comboExchange" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
          <el-select v-model="dataForm.currency" placeholder="Currency" @change="choseChange">
            <el-option v-for="item in comboCurrency" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 10px;">
          <div id="J_chartLineBox" class="chart-box"></div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data () {
      return {
        exchange: '',
        dataForm: {
          exchange: '',
          currency: 'btc',
          beginDate: '2021-07-21',
          endDate: '2021-07-30'
        },
        comboExchange: [
          {
            key: '',
            value: 'All Exchanges'
          },
          {
            key: 'Binance',
            value: 'binance'
          },
          {
            key: 'Bitfinex',
            value: 'bitfinex'
          },
          {
            key: 'Bitbank',
            value: 'bitbank'
          },
          {
            key: 'Okex',
            value: 'okex'
          },
          {
            key: 'Huobi',
            value: 'huobi'
          },
          {
            key: 'Coinbase',
            value: 'coinbase'
          }
        ],
        comboCurrency: [
          {
            key: 'BTC',
            value: 'btc'
          },
          {
            key: 'USDT',
            value: 'usdt'
          },
          {
            key: 'USDC',
            value: 'usdc'
          },
          {
            key: 'ETH',
            value: 'eth'
          }
        ],
        amountList: [],
        amountSymbolList: [],
        dateStrList: []
      }
    },
    mounted () {
      this.initData()
      this.initChartLine()
    },
    methods: {
      initData: function () {
        this.$http({
          url: this.$http.adornUrl(`/sys/btcAlert/queryIn`),
          method: 'get',
          params: this.$http.adornParams({
            'exchange': this.dataForm.exchange,
            'currency': this.dataForm.currency,
            'beginDate': this.dataForm.beginDate,
            'endDate': this.dataForm.endDate
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // this.initChartLine(data.data.dateList, data.data.inExchange, data.data.outExchange)
            this.dateStrList = data.data.dateList
            this.amountList = data.data.amountList
            this.amountSymbolList = data.data.amountSymbolList
            this.initChartLine()
            console.log(this.inList)
          }
        })
      },
      // 折线图
      initChartLine () {
        var option = {
          title: {
            text: '',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dateStrList
          },
          yAxis: [{
            name: 'amount',
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          }, {
            name: 'amountUsd',
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          }],
          series: [
            {
              name: 'amout',
              type: 'line',
              yAxisIndex: 0,
              data: this.amountList
            },
            {
              name: 'amoutUsd',
              type: 'line',
              yAxisIndex: 1,
              data: this.amountSymbolList
            }
          ]
        }
        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      },
      choseChange: function () {
        this.initData()
        this.initChartLine()
      }
    }
  }
</script>
